<template>
  <div>
    <a-input-search v-model:value="label" :placeholder="placeholder" :style="style" @search="onSearch" :readonly="true" :disabled="disabled"/>
    <DepartmentModal @register="departmentModal" @getSelectResult="handleResult" ref="modalRef" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, toRaw, watch, onMounted } from 'vue'
import { DepartProps, departProps } from './props'
import { DepartmentModal } from '/@/views/system/depart/export/select'
import { useModal } from '/@/components/Modal';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';

export default defineComponent({
  name: 'JSingleDepart',
  components: {
    DepartmentModal
  },
  props: departProps,
  emits: ['update:value'],
  setup(props: DepartProps, { emit }) {    
    const modalRef = ref()
    const value = ref(props.value)
    const style = ref(props.style)
    const label = ref(props.label)
    const disabled = ref(props.disabled)
    const placeholder = ref(props.placeholder)
    const [state] = useRuleFormItem(props, 'value', 'change');
    const [departmentModal, { openModal }] = useModal();
    function onSearch() {
      openModal()
    }
    function handleResult(options, values) {      
      label.value = options[0].label
      value.value = values[0]
    }
    watch(() => value.value, (newValue) => {
      state.value = newValue
      emit('update:value', toRaw(newValue))
    })
    watch(()=>state.value, (newValue)=>{
      label.value = modalRef.value.setValue(newValue)
    })
    onMounted(() => {


    })
    return {
      value,
      style,
      onSearch,
      departmentModal,
      handleResult,
      label,
      placeholder,
      modalRef
    }
  }
})
</script>
<style scoped></style>
